<!--工作经历表单-->
<template>
  <div class="form">
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left" class="label required">职称名称</span>
        <xf-picker
          v-model="form.titleCode"
          ref="titleCode"
          placeholder="请选择职称名称"
          :valid="[{required: true, msg: '请选择职称名称'}]"
          :list="title"
          slot="right"></xf-picker>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">职称级别</span>
        <xf-picker
          v-model="form.titleLevel"
          ref="titleLevel"
          placeholder="请选择职称级别"
          :valid="[{required: true, msg: '请选择职称级别'}]"
          :list="titLevel"
          slot="right"></xf-picker>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">取得专技资格日期</span>
        <xf-date-picker
          :valid="[{required: true, msg: '请选择取得专技资格日期'}]"
          v-model="form.titleDate"
          ref="titleDate"
          placeholder="请选择取得专技资格日期"
          :endDate="new Date()"
          slot="right"></xf-date-picker>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">职称（工种）资格名称</span>
        <xf-picker
          slot="right"
          :valid="[{required: true, msg: '请输入职称（工种）资格名称'}]"
          v-model="form.occupationId"
          search
          ref="occupationId"
          :list="craft"
          placeholder="请输入职称（工种）资格名称"></xf-picker>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label">国家职业（工种）资格等级</span>
        <xf-picker
          v-model="form.occupationLevel"
          ref="occupationLevel"
          placeholder="请选择国家职业（工种）资格等级"
          :list="coq"
          slot="right"></xf-picker>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">国家职业（工种）资格等级日期</span>
        <xf-date-picker
          :valid="[{required: true, msg: '请选择国家职业（工种）资格等级日期'}]"
          v-model="form.occupationDate"
          ref="occupationDate"
          placeholder="请选择国家职业（工种）资格等级日期"
          :endDate="new Date()"
          slot="right"></xf-date-picker>
      </yd-cell-item>
    </yd-cell-group>
    <div class="right-bottom">
      <mt-button type="default" size="small" @click="cancel">取消</mt-button>
      <mt-button type="primary" size="small" @click="onSubmit">保存</mt-button>
    </div>
  </div>
</template>
<script>
  import XfDatePicker from '../../../components/xf-date-picker/xf-date-picker.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import {dics, getDics} from '../../../common/js/dictionaries'
  import {mapGetters} from 'vuex'
  import {echo} from '../../../common/js/util'

  export default {
    components: {
      XfPicker,
      XfInput,
      XfDatePicker},
    name: 'form-technology',
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    props: {
      detail: {type: null, default: () => { return {} }}
    },
    data() {
      return {
        form: {
          id: '',
          titleCode: '', // 职称
          titleLevel: '', // 级别
          titleLevelN: '', // 级别名称
          titleDate: '', // 日期
          occupationId: '', // 职业（工种）资格代码
          occupationLevel: '', // 国家职业（工种）资格等级
          occupationLevelN: '', // 国家职业（工种）资格等级名称
          occupationDate: '' // 国家职业（工种）资格等级日期
        },
        title: [],
        titLevel: [],
        craft: [],
        coq: []
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },
      onSubmit() {
        const form = Object.assign({}, this.form)
        form.personId = this.$route.query.id
        this.$post('/admin/person/sapi/personal/records/perEntry/update/title/qualification', form, loading => {
          this.$message.loading(loading)
        }).then(res => {
          this.$emit('save')
        })
      },
      getDics() {
        getDics(dics.title, dics.titLevel, dics.craft, dics.coq).then(res => {
          this.title = res[0]
          this.titLevel = res[1]
          this.craft = res[2]
          this.coq = res[3]
        })
      }
    },
    created() {
      this.getDics()
      echo(this.form, this.detail)
    }
  }
</script>
